<template>
    <div>
        <van-nav-bar id="reset" title="新增健康档案" left-arrow @click-left="backHandle" fixed z-index="100" />
        <div class="pageCon fuPage">

            <div class="uploadMain">
                <div class="tipBox">
                    <div>请上传您的病例等相关图片</div>
                    <div>*请确保上传图片的清晰度</div>
                    <div>*一次最多上传九张图片</div>
                </div>

                <div class="imgBox">
                    <div>
                        <van-uploader v-model="fileList" :before-delete="beforeDelete" :after-read="afterRead" multiple
                            :max-count="9" />
                    </div>
                </div>
            </div>


            <div class="subBtn" @click="subHandle">提交</div>


        </div>
    </div>

</template>

<script>

import { addUserCases } from '../../network/user'

export default {
    name: 'HomeR',
    data() {
        return {
            fileList: [],
        }
    },
    mounted() {

    },
    methods: {

        subHandle() {
            if (this.fileList.length == 0) {
                this.$toast.fail('请上传病例图片')
                return
            }
            let fd = new FormData();
            fd.append("userId", localStorage.userId);
            this.fileList.forEach(ele => {
                fd.append("cases", ele.file);
            });
            addUserCases(fd).then(res => {
                if (res.flag) {
                    this.$toast.success('上传成功')
                    this.$router.go(-1)
                    console.log(res);
                }
            })
        },


        backHandle() {
            this.$router.back()
        },
        // 删除图片
        beforeDelete: function (e) {
            console.log(e);

            this.fileList = this.fileList.filter(item => {
                return item.file.name != e.file.name
            })

            console.log(this.fileList);
            console.log(this.file);

            // this.file = [];
            // this.fileList = [];
        },
        // 图片上传
        afterRead: function (file) {
            // 此时可以自行将文件上传至服务器
            this.file = file.file
            console.log(this.file);
        },




    },
    created() {
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.tipBox {
    padding: 24px 0;
    font-size: 32px;
    color: #333;
    line-height: 48px;
}

.tipBox>div:not(:first-child) {
    font-size: 28px;
    color: red;
    font-weight: 400;
}

.pageCon {
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #EEF1F7;
    overflow: hidden;
}


#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}

::v-deep .van-uploader__upload,
::v-deep .van-image,
::v-deep .van-uploader__preview-image {
    width: 190px;
    height: 190px;
    border-radius: 18px;
}

.subBtn {
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 434px;
    height: 76px;
    background: linear-gradient(95deg, #1CD0BA, #1CD0BA);
    box-shadow: 0px 2px 8px 0px rgba(51, 51, 51, 0.04);
    border-radius: 38px;
    border: 2px solid #1CD0BA;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #FFFFFF;
}


.uploadMain {
    box-sizing: border-box;
    padding: 24px;
    margin-top: 20px;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(51, 51, 51, 0.04);
    border-radius: 20px;
}
</style>